import {connect} from "react-redux";
import {increment, decrement, asyncIncrement} from "../../redux/actions/count";
import React, {Component} from "react";
import './index.css'

class Count extends Component {
  state = {
    delta: 1
  }

  handleSelect = e => this.setState({delta: e.target.value * 1})

  handleIncrement = () => {
    this.props.increment(this.state.delta)
  }

  handleDecrement = () => {
    this.props.decrement(this.state.delta)
  }


  handleAddIfOdd = () => {
    const value = this.props.count
    if (value % 2 !== 0) {
      this.props.increment(this.state.delta)
    }
  }

  handleAddDelay = () => {
    this.props.asyncIncrement(this.state.delta, 100)
  }

  render() {
    const value = this.props.count
    const len = this.props.personsCount
    return (
      <div>
        <h1>当前求和: {value}, 总人数: {len}</h1>
        <select onChange={this.handleSelect}>
          <option value={1}>1</option>
          <option value={1}>2</option>
          <option value={1}>3</option>
        </select> &nbsp;
        <button onClick={this.handleIncrement}>increment</button>
        &nbsp;
        <button onClick={this.handleDecrement}>decrement</button>
        &nbsp;
        <button onClick={this.handleAddIfOdd}>addIfOdd</button>
        &nbsp;
        <button onClick={this.handleAddDelay}>addDelay</button>
        &nbsp;
      </div>
    )
  }
}

export default connect(
  state => ({
    count: state.count,
    personsCount: state.persons.length
  }),
  {increment, decrement, asyncIncrement})
(Count)
